<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>受控组件-推荐使用（勿过度使用ref）</title>
</head>

<body>
	<div id="container"></div>

	<script src="../js-react/react@16.development.js"></script>
	<script src="../js-react/react-dom@16.development.js"></script>
	<script src="../js-react/babel@6.min.js"></script>

	<script type="text/babel">
        /*
            受控组件怎么受控？==> 组件中输入类的dom改变的时候，会把数据存储到状态中（state），当需要使用时，再从状态中取出。
            类似vue中的双向绑定，react中未实现。
        */
		class Login extends React.Component {
            // 初始化
            state = {
                username: '',
                password: ''
            }

            saveUsername = (e) => {
                this.state.username = e.target.value
            }

            savePassword = (e) => {
                this.state.password = e.target.value
            }

			handleSubmit = (event) => {
				event.preventDefault()	// 阻止事件默认处理方式 ==> 此处为表单提交
				const {username, password} = this.state
				alert(`您输入的用户名是:${username}，密码是:${password}`)
			}

			render() {
				return (
					<form action={this.props.action} onSubmit={this.handleSubmit}>
						用户：<input onChange={this.saveUsername} type="text" name="username"/>&nbsp;
						密码：<input onChange={this.savePassword} type="password" name="password"/>&nbsp;
						<button>登录</button>
					</form>
				)
			}
		}

		ReactDOM.render(<Login action="https://www.baidu.com"/>, document.getElementById('container'))
	</script>
</body>

</html>